<script setup lang="ts">
import { categorylistFn, categorybrandlistFn, categorybrandprolistFn } from '@/api/sort'


import { ref } from 'vue'
import type { Ref } from 'vue'
const active: Ref<number> = ref(0)
const categorylist: Ref<string[]> = ref([])

// const categorybrandlist: Ref<string[]> = ref([])  错误写法
const categorybrandlist: Ref<Array<{ brand: string }>> = ref([])

categorylistFn().then(res => {
  console.log(5555, res.data);
  categorylist.value = res.data
  //获取品牌列表
  categorybrandlistFn({ category: categorylist.value[active.value] }).then(res => {
    console.log(66, res.data);
    categorybrandlist.value = res.data

    categorybrandprolistFn({
      category: categorylist.value[0],
      brand: categorybrandlist.value[0].brand//第一次拿数据加载的是第一条数据0
    }).then(res => {
      proList.value = res.data
    })
  })
})
//分类的点击事件
function slidebarClick(index: number) {
  // console.log(8,index);//侧边导航栏的索引值
  active.value = index//设置索引值给被选中的
  categorybrandlistFn({ category: categorylist.value[index] }).then(res => {
    console.log(9, res.data);
    categorybrandlist.value = res.data

    categorybrandprolistFn({
      category: categorylist.value[index],
      brand: categorybrandlist.value[0].brand//第一次拿数据加载的是第一条数据0
    }).then(res => {
      proList.value = res.data
    })
  })
}
// function changeClick() {

//   categorybrandlistFn({ category: categorylist.value[active.value] }).then(res => {
//     console.log(66, res.data);
//     categorybrandlist.value = res.data
//   })
// }
import type { iPro } from '@/types/homeType';
const proList: Ref<Array<iPro>> = ref([])
//切换右边的导航栏 显示不同的商品
//点击品牌时候的回调函数
function changeTab({name}:{name:number}) {//两种写法
console.log(11,name);

// function changeTab(item: { name: number }) {
//   console.log(item.name)//拿到上方导航栏的索引值
  categorybrandprolistFn({
    category: categorylist.value[active.value],
    brand: categorybrandlist.value[name].brand

  }).then(res => {
    console.log(9, res.data);
    proList.value = res.data
  })
}

</script>

<template>
  <main class="box">
    <header class="header">头部-分类</header>
    <div class="content">
      <div class="left">
        <!--侧边导航 -->
        <!-- <van-sidebar v-model="active" @change="changeClick()"> -->
        <van-sidebar v-model="active">
          <van-sidebar-item @click="slidebarClick" :title="item" v-for="item in categorylist" :key="item" />
        </van-sidebar>
      </div>
      <div class="right">
        <van-tabs @click-tab="changeTab" title-active-color="#f66" :line-width="0" :duration="0">
          <van-tab  v-for="item in categorybrandlist" :key="item.brand" :title="item.brand">
            <van-grid :column-num="3">
              <van-grid-item  v-for="item in proList" :key="item.proid" :icon="item.img1" :text="item.brand" />
            </van-grid>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </main>
</template>
<style lang="scss" scoped>
.box {
  .content {
    display: flex;

    .left {
      width: 22%;

      overflow: auto;

    }

    .right {
      flex: 1;
    }
  }
}
</style>